<template>
  <div class="forgetstep1">
    <div class="stepHead">
      <el-row :gutter="2">
        <el-col :span="4">
          <div class="RetrieveText">找回登录密码</div>
        </el-col>
        <el-col :span="7">
          <div class="mycolor color1"></div>
          <div class="a7">第一步：填写账号</div>
        </el-col>
        <el-col :span="7">
          <div class="mycolor color2"></div>
          <div class="a7">第二步：验证并设置新密码</div>
        </el-col>
        <el-col :span="6">
          <div class="mycolor color3"></div>
          <div class="f2">第三步：设置成功</div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <p>
        <i class="el-icon-success"></i>
        修改成功，请牢记新的登录密码
      </p>
      <div>
        <i class="el-icon-loading"></i>
        {{count}}秒后自动转到登录页面...
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forgetStep3',
  
  data() {
    return {
      count: 3
    }
  },

  methods: {
    // 转到登录页面

    initPage() {
      let timer = setInterval(() => {

        if (this.count > 0) {
          this.count--
        } else{
          clearInterval(timer)
          this.$router.push({
            name:'login'
          })
        }
      }, 1000)
    }

  },

  mounted() {
    this.initPage()
  }
}
</script>

<style lang='scss' scoped>
.forgetstep1 {
  padding-bottom: 40px;
  border-bottom: 1px #e6e6e6 dashed;
  .stepHead {
    height: 134px;
    border-bottom: 1px solid #e6e6e6;
    .el-row {
      width: 786px;
      padding-left: 94px;
      padding-top: 50px;
      .RetrieveText {
        font-size: 16px;
        font-weight: bold;
        color: #2f2f2f;
      }
      .mycolor {
        height: 8px;
        margin-top: 6.5px;
      }
      .color1,
      .color2 {
        background-color: #ffd05e;
      }
      .color3 {
        background-color: #ff9c00;
      }
      .f2,
      .a7 {
        font-size: 14px;
        margin-top: 15px;
      }
      .f2 {
        color: #2f2f2f;
      }
      .a7 {
        color: #a7a7a7;
      }
    }
  }
  .content {
    p {
      line-height: 350px;
      text-align: center;
      color: #6cab40;
      font-size: 20px;
    }
    div {
      font-size: 20px;
      color: #ccc;
      text-align: center;
    }
  }
}
</style>